<script setup lang="ts">
const doSearch = (_formData: { page: number; limit: number }, onSuccess: Function) => {
    // const submitData = { ...formData }
    // listApi(submitData, userStore.useType).then((res) => {
    //     const { data } = res as { data: { data: any; total: number } }
    //     onSuccess({ data })
    // })
    onSuccess({
        data: {
            data: [
                {
                    img: '/static/img/grxx.png',
                    name: '陈志远',
                    class: '现任财务总监'
                },
                {
                    img: '/static/img/grxx.png',
                    name: '陈志远',
                    class: '现任财务总监'
                },
                {
                    img: '/static/img/grxx.png',
                    name: '陈志远',
                    class: '现任财务总监'
                },
                {
                    img: '/static/img/grxx.png',
                    name: '陈志远',
                    class: '现任财务总监'
                },
                {
                    img: '/static/img/grxx.png',
                    name: '陈志远',
                    class: '现任财务总监'
                }
            ],
            total: 0
        }
    })
}

const selectIndex = ref(0)
const buttlist = ref([
    {
        butname: '同意'
    },
    {
        butname: '反对'
    },
    {
        butname: '弃权'
    }
])

const selectBut = (index: number) => {
    selectIndex.value = index
}
</script>

<template>
    <!-- 你的页面内容 -->
    <view class="box">
        <ex-list ref="reListRef" custom-list-type="scroll" :on-form-search="doSearch" empty-text="">
            <template v-slot="{ data }">
                <view class="headpart">
                    <view class="title">2024年度董事会成员选举</view>
                    <view class="time">投票开始时间：2024年3月15日 18:00</view>
                    <view class="time">投票截止时间：2024年3月15日 18:00</view>
                </view>
                <view class="tppart">
                    <view class="tpone" v-for="(row, index) of data" :key="'tpone' + index">
                        <view class="topp">
                            <img style="width: 96rpx; height: 96rpx; border-radius: 50%" :src="row.img" alt="" />
                            <view class="rightpart">
                                <view class="name">
                                    {{ row.name }}
                                </view>
                                <view class="class">
                                    {{ row.class }}
                                </view>
                            </view>
                        </view>
                        <view class="bottomp">
                            <view
                                class="minbut"
                                v-for="(item, index) in buttlist"
                                :key="'minbut' + index"
                                @click="selectBut(index)"
                                :class="{ active: selectIndex === index }"
                            >
                                {{ item.butname }}
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </ex-list>
        <view class="bottbutton">
            <view class="qbty">全部同意</view>
            <view class="tjtp">提交投票</view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.box {
    width: 100%;
    height: 100vh;
    background-color: #f9fafb;

    .headpart {
        width: 86%;
        height: 194rpx;
        border-radius: 24rpx;
        background-color: #eff6ff;
        margin: 32rpx auto;
        padding: 20rpx 3%;

        .title {
            color: #2563eb;
            font-size: 28rpx;
            margin-top: 16rpx;
        }

        .time {
            margin-top: 16rpx;
            color: #4b5563;
            font-size: 28rpx;
        }
    }

    .tppart {
        width: 100%;
        max-height: 69vh;
        overflow-y: auto;
        display: grid;
        justify-items: center;

        .tpone {
            width: 91%;
            height: 264rpx;
            padding: 20rpx 4%;
            box-sizing: border-box;
            border-radius: 24rpx;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff;
            box-sizing: border-box;
            border: 2rpx solid #f3f4f6;
            box-shadow:
                0rpx 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1),
                0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
            margin-top: 32rpx;
            display: grid;

            .topp {
                display: flex;

                .rightpart {
                    margin-left: 32rpx;
                    display: grid;
                    justify-items: left;
                    align-content: baseline;

                    .name {
                        font-family: Roboto;
                        font-size: 28rpx;
                        font-weight: 500;
                        line-height: 42rpx;
                        letter-spacing: normal;
                        color: #000000;
                        margin-top: 7rpx;
                    }

                    .class {
                        font-family: Roboto;
                        font-size: 28rpx;
                        font-weight: normal;
                        line-height: 40rpx;
                        letter-spacing: normal;
                        color: #6b7280;
                        margin-top: 7rpx;
                    }
                }
            }

            .bottomp {
                display: flex;
                justify-content: space-between;
                gap: 0rpx 20rpx;

                .minbut {
                    flex: 1;
                    width: 190rpx;
                    height: 76rpx;
                    /* 自动布局 */
                    display: flex;
                    justify-content: center;
                    padding: 16rpx 32rpx;
                    flex-wrap: wrap;
                    align-content: flex-start;
                    border-radius: 8rpx;
                    background: #ffffff;
                    box-sizing: border-box;
                    border: 2rpx solid #d1d5db;
                    font-family: Roboto;
                    font-size: 28rpx;
                    font-weight: normal;
                    line-height: 40rpx;
                    text-align: center;
                    letter-spacing: normal;
                    color: #4b5563;
                }

                .minbut.active {
                    border: 2rpx solid #2563eb;
                    color: #2563eb;
                }
            }
        }

        .tpone:first-child {
            margin-top: 0;
        }
    }

    .bottbutton {
        width: 100%;
        height: 10vh;
        display: flex;
        padding: 24rpx 32rpx;
        gap: 0rpx 24rpx;
        flex-wrap: wrap;
        align-content: flex-start;
        background: #ffffff;
        box-sizing: border-box;
        border-width: 2rpx 0rpx 0rpx 0rpx;
        border-style: solid;
        border-color: #f3f4f6;
        position: fixed;
        bottom: 0;

        .qbty {
            width: 331rpx;
            height: 90rpx;
            /* 自动布局 */
            display: flex;
            box-sizing: border-box;
            justify-content: center;
            padding: 24rpx 0rpx;
            gap: 0rpx 20rpx;
            flex-wrap: wrap;
            border-radius: 8rpx;
            background: #eff6ff;
            font-family: Roboto;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 42rpx;
            text-align: center;
            letter-spacing: normal;
            color: #2563eb;
        }

        .tjtp {
            width: 331rpx;
            height: 90rpx;
            /* 自动布局 */
            display: flex;
            box-sizing: border-box;
            justify-content: center;
            padding: 24rpx 0rpx;
            gap: 0rpx 20rpx;
            flex-wrap: wrap;
            border-radius: 8rpx;
            background: #2563eb;
            font-family: Roboto;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 42rpx;
            text-align: center;
            letter-spacing: normal;
            color: #ffffff;
        }
    }

    .address-items {
        padding: 20rpx 15rpx 32rpx 28rpx;
        background-color: #fff;
        border-bottom: 2rpx solid #f5f5f5;

        .left {
            flex: 1;
            overflow: hidden;

            .name {
                font-size: 28rpx;
                font-weight: 700;
                color: #101010;
                line-height: 40rpx;
                margin-right: 16rpx;
            }

            .isdefault {
                font-size: 20rpx;
                font-weight: 400;
                color: #fff;
                padding: 4rpx 12rpx;
                border-radius: 8rpx;
                background: linear-gradient(90deg, #4778ff 0%, #4778ffb8 100%);
            }

            .info {
                width: 100%;
                color: #666;
                font-size: 24rpx;
                font-weight: 400;
                margin-top: 12rpx;
            }
        }

        .right {
            width: 140rpx;
            padding-left: 32rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #4979ff;
            text-align: right;
        }
    }

    .buts {
        width: 100%;
        height: 10vh;
        background-color: F3F4F6;
        position: fixed;
        bottom: 0;
        border-top: 2rpx solid #ebebec;
    }
}
</style>
